// 1.1 获取裁剪区域的 DOM 元素
var $image = $('#image')
// 1.2 配置选项
const options = {
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域
    preview: '.img-preview'
}

// 1.3 创建裁剪区域
$image.cropper(options)

$('.uploadBtn').on('click', function () {
    $('#userpic').click()
    listenFile()
})

$('.changePic').on('click', function () {
    var file = $('#userpic')[0].files
    if (file.length == 0) return layui.layer.msg('请先上传图片')
    var dataURL = $image
        .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
            width: 100,
            height: 100
        })
        .toDataURL('image/png')       // 将 Canvas 画布上的内容，转化为 base64 格式的字符串

    updateAvatar(dataURL)

})


//封装发送ajax请求将头像上传至服务器
function updateAvatar(base64) {
    $.ajax({
        type: 'POST',
        url: '/my/update/avatar',
        data: { avatar: base64 },
        success: function (res) {
            if (res.status !== 0) return layui.layer.msg(res.message)
            layui.layer.msg(res.message)
            window.parent.getUserInfo()

        }
    })
}



//监听input表单change事件
function listenFile() {
    $('#userpic').on('change', function (e) {
        var file = e.target.files
        // var file = $(this)[0].files
        var newImgURL = URL.createObjectURL(file[0])
        $image.cropper('destroy').attr('src', newImgURL).cropper(options)
    })
}

